<template>
  <div id="wrapper">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="客户名称" size="mini">
        <el-input style="width: 9em" v-model="listQuery.client" placeholder="客户名称"></el-input>
      </el-form-item>
      <el-form-item label="合同编号" size="mini">
        <el-input style="width: 9em" v-model="listQuery.no" placeholder="合同编号"></el-input>
      </el-form-item>
      <el-form-item label="机器码" size="mini">
        <el-input style="width: 9em" v-model="listQuery.mac" placeholder="机器码"></el-input>
      </el-form-item>
      <el-form-item label="产品类型" size="mini">
        <el-select v-model="listQuery.type" placeholder="产品类型" style="width: 9em">
          <el-option label="公安" :value="0"></el-option>
          <el-option label="网信" :value="1"></el-option>
          <el-option label="全链路" :value="2"></el-option>
          <el-option label="数管" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="resetList">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
    :data="tableData"
    row-key="id"
    style="width: 100%"
    :expand-row-keys="expandRowKeys"
    @expand-change="getApplyLicenseLogs">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-steps :active="props.row.hasLast ? props.row.logs.length : props.row.logs.length - 1">
          <el-step
              v-for="item in props.row.logs"
              :key="item.id"
              :title="item.createTime"
              :description="(item.status == 6 || item.status == 7 || item.status == 8) ? item.userName + ':' + statusFormatter(item) : statusFormatter(item)"
              :status="getStepStatus(item.status, item.id)"></el-step>
        </el-steps>
<!--      <el-descriptions class="margin-top" title="许可证详情" :column="3" :size="''">applyLicenseLogs-->
<!--        <template slot="extra">-->
<!--        <el-button type="primary" size="small" @click="handleSearch(props.$index, props.row)">结果搜索</el-button>-->
<!--        </template>-->
<!--        <el-descriptions-item label="客户名称">{{ props.row.client }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="产品类型">{{ props.row.type == 0 ? "关键信息基础设施安全保卫平台" : props.row.type == 1 ? "网络安全协调指挥平台" : "AiLPHA一体化全链路网络安全监督管理与运营平台" }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="合同编号">{{ props.row.no }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="合同类型">{{ licType[props.row.licType] }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="机器码">{{ props.row.mac }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="合同开始时间">{{ props.row.startTime }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="合同结束时间">{{ props.row.endTime }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="合同时长(月)">{{ props.row.mouth }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="备注">{{ props.row.remarks }}</el-descriptions-item>-->
<!--        <el-descriptions-item :label="'模块'">-->
<!--        <template>-->
<!--          <el-tag v-for="item in props.row.model" :key="item.modelCode" :type="item.purchase ? 'success' : 'danger'">-->
<!--          {{ item.modelName }} <i class="el-icon-check" v-if="item.purchase"></i><i class="el-icon-close" v-if="!item.purchase"></i>-->
<!--          </el-tag>-->
<!--        </template>-->
<!--        </el-descriptions-item>-->
<!--      </el-descriptions>-->
      </template>
    </el-table-column>
    <el-table-column
    label="客户名称"
    prop="client">
    </el-table-column>
    <el-table-column
    label="合同类型">
      <template slot-scope="scope">
      {{ scope.row.type == 0 ? "关键信息基础设施安全保卫平台" : scope.row.type == 1 ? "网络安全协调指挥平台" : scope.row.type == 2 ? "AiLPHA一体化全链路网络安全监督管理与运营平台" : "AiDSC数据安全管控平台"}}
      </template>
    </el-table-column>
    <el-table-column
    label="合同编号"
    prop="no">
    </el-table-column>
    <el-table-column
        label="申请人"
        prop="applyUser">
    </el-table-column>
      <el-table-column
          label="审核人"
          prop="agreeApplyUser">
      </el-table-column>
    <el-table-column
        label="申请状态"
        prop="status"
        width="120">
      <template slot-scope="scope">
        <i class="el-icon-info" style="color: orange" v-if="scope.row.status != 2 && scope.row.status != 4 && scope.row.status != 7"></i>
        <i class="el-icon-error" style="color: red" v-if="scope.row.status == 2 || scope.row.status == 7"></i>
        <i class="el-icon-success" style="color: lawngreen" v-if="scope.row.status == 4"></i>
        {{statusFormatter(scope.row)}}
      </template>
    </el-table-column>
    <el-table-column
    label="创建时间"
    prop="createTime"
    width="100">
    </el-table-column>
    <el-table-column
    label="操作"
    width="200">
      <template slot-scope="scope">
      <el-button
        size="mini"
        type="primary"
        @click="handleSearch(scope.$index, scope.row)">结果</el-button>
        <el-button
            size="mini"
            type="info"
            @click="detail(scope.$index, scope.row)">详情</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%">
      <el-table
        :data="searchTableData"
        style="width: 100%">
        <el-table-column
          prop="fileName"
          label="文件名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="outTime"
          label="传出时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="fileSize"
          label="大小">
        </el-table-column>
        <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="downloadDat(scope.$index, scope.row)">下载</el-button>
        </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
        :visible.sync="detailDialogVisible"
        width="85%">

      <template slot-scope="props">
        <el-descriptions class="margin-top" title="许可证详情" :column="3" :size="''">
          <template slot="extra">
            <el-button type="primary" size="small" @click="handleSearch(1, detailDialog)">结果搜索</el-button>
          </template>
          <el-descriptions-item label="客户名称">{{ detailDialog.client }}</el-descriptions-item>
          <el-descriptions-item label="产品类型">{{ detailDialog.type == 0 ? "关键信息基础设施安全保卫平台" : detailDialog.type == 1 ? "网络安全协调指挥平台" : "AiLPHA一体化全链路网络安全监督管理与运营平台" }}</el-descriptions-item>
          <el-descriptions-item label="合同编号">{{ detailDialog.no }}</el-descriptions-item>
          <el-descriptions-item label="合同类型">{{ licType[detailDialog.licType] }}</el-descriptions-item>
          <el-descriptions-item label="机器码">{{ detailDialog.mac }}</el-descriptions-item>
          <el-descriptions-item label="合同开始时间">{{ detailDialog.startTime }}</el-descriptions-item>
          <el-descriptions-item label="合同结束时间">{{ detailDialog.endTime }}</el-descriptions-item>
          <el-descriptions-item label="合同时长(月)">{{ detailDialog.mouth }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ detailDialog.remarks }}</el-descriptions-item>
          <el-descriptions-item :label="'模块'">
            <template>
              <el-tag v-for="item in detailDialog.model" :key="item.modelCode" :type="item.purchase ? 'success' : 'danger'" style="margin-top: 1em;margin-left: 1em">
                {{ item.modelName }} <i class="el-icon-check" v-if="item.purchase"></i><i class="el-icon-close" v-if="!item.purchase"></i>
              </el-tag>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </template>

    </el-dialog>
  </div>
</template>

<script>
 export default {
  name: 'licenseList',
  data: function(){
   return {
    listQuery: {
      "client": '',
      "no": '',
      "type": null,
      "mac": '',
      "pageNo": 1,
      "pageSize": 10
    },
    total: 50,
    tableData: [],
    searchTableData: [],
    licType: {
     0: '正式合同',
     1: '试用合同',
     2: '内部测试'
    },
    dialogVisible: false,
    searchId: '',
    dialogTitle: '',
    detailDialogVisible: false,
    detailDialogTitle: '',
    detailDialog: {},
    applyLicenseLogs: [],
    expandRowKeys: []
   }
  },
  methods: {
    getStepStatus(status, last) {
      if (last == -1) {
        return null
      }
      if (status == 2 || status == 7){
        return 'error'
      }
      return 'success'
    },
    async handleSearch(index, row){
      let res = await this.$http.get('/api/license/getDbDatByLicenseId?id='+row.id)
      this.searchTableData = res.data
      this.searchId = row.id
      this.dialogTitle = "内传外搜索结果"
      this.dialogVisible = true
    },
    detail(index, row) {
      this.detailDialog = row
      this.detailDialogTitle = "许可详情"
      this.detailDialogVisible = true
    },
    downloadDat(index, row){
      const url = this.$http.defaults.baseURL + '/api/license/dbDat/' + row.id + '/download'
      window.location.href = url
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    resetList() {
      this.listQuery.client = null
      this.listQuery.no = null
      this.listQuery.type = null
      this.listQuery.pageNo = 1
      this.listQuery.pageSize = 10
      this.getList()
    },
    async getList(){
      this.expandRowKeys = []
      let res = await this.$http.post('/api/license/list', this.listQuery)
      this.tableData = res.data.data
      this.total = res.data.total
      this.tableData.forEach(element => {
        if(element.model != '' && element.model != undefined) {
          element.model = JSON.parse(element.model)
        }
        if(element.file != '' && element.file != undefined) {
          element.file = JSON.parse(element.file)
        }
      });
    },
    /**
     * 获取申请日志
     * @param row
     * @returns {Promise<void>}
     */
    async getApplyLicenseLogs(row) {
      let res = await this.$http.get('/api/license/getApplyLicenseLogs?licenseId=' + row.id)
      if (res.data != undefined) {
        row.logs = res.data
        let hasLast = false;
        for (let log of row.logs) {
          if (log.status == 4 || log.status == 7 || log.status == 2) {
            hasLast = true
          }
        }
        if (!hasLast) {
          let last = {
            id: -1,
            status: 4,
            createTime: 'xxxx-xx-xx xx:xx:xx'
          }
          row.logs.push(last)
        }
        row.hasLast = hasLast
        this.tableData = this.tableData.slice(0)
      }
    },
    statusFormatter(row, column){
      const status = row.status
      if (status == 0) {
        return '未传入申请'
      } else if (status == 1) {
        return '正在传入申请'
      } else if (status == 2) {
        return '传入申请报错'
      } else if (status == 3) {
        return '传入成功等待dat传出'
      } else if (status == 4) {
        return '成功获取dat文件'
      } else if (status == 5) {
        return '等待审核'
      } else if (status == 6) {
        return '审核通过'
      } else if (status == 7) {
        return '审核不通过'
      } else if (status == 8) {
        return '发起申请'
      } else {
        return '未知'
      }
    }
  },
  activated: function(){
    this.getList()
  },
  mounted() {
    this.$bus.$on('page-refresh', name => {
      if (name === 'LicenseList') {
        this.getList()
      }
    })
  }
 }
</script>

<style>
  .demo-table-expand{
    font-size: 0;
  }
  .demo-table-expand label{
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item{
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .apply{
    padding: 10px;
    padding-right: 50px;
    text-align: right;
  }
  .block {
    margin-top: 10px;
  }
</style>
